<template>
  <div>
    <el-form inline :model="wareSkuSearchDto">
      <el-form-item label="仓库">
        <el-select @visible-change="getWareInfoListData" v-model="wareSkuSearchDto.wareId">
          <el-option
              v-for="item in wareList"
              :key="item.id"
              :label="item.name"
              :value="item.id"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="SkuId">
        <el-input v-model="wareSkuSearchDto.skuId"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button @click="SearchWareSkuListFun">查询</el-button>
      </el-form-item>
      <el-form-item>
        <el-button @click="addDialog=true">新增</el-button>
      </el-form-item>
      <el-form-item>
        <el-button type="danger">批量删除</el-button>
      </el-form-item>
    </el-form>
  </div>
  <div>
    <el-table :data="wareSkuListData" style="width: 100%">
      <el-table-column prop="id" label="编号" />
      <el-table-column prop="skuId" label="skuId" />
      <el-table-column prop="wareId" label="仓库id"/>
      <el-table-column prop="stock" label="库存数"/>
      <el-table-column prop="skuName" label="sku名称" show-overflow-tooltip/>
      <el-table-column prop="stockLocked" label="锁定库存"/>
      <el-table-column label="操作">
        <template #default="scope">
          <el-text>修改</el-text>
          <el-divider direction="vertical"/>
          <el-text>删除</el-text>
        </template>
      </el-table-column>
    </el-table>
  </div>
  <div>
    <el-dialog
        v-model="addDialog"
        title="新增库存"
        width="30%"
        @close="addRef.resetFields()"
    >
      <div>
        <el-form :model="addWareSkuData" ref="addRef">
          <el-form-item label="仓库" prop="wareId">
            <el-select v-model="addWareSkuData.wareId">
              <el-option
                  v-for="item in wareList"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="skuId" prop="skuId">
            <el-input v-model="addWareSkuData.skuId"></el-input>
          </el-form-item>
          <el-form-item label="库存" prop="stock">
            <el-input-number v-model="addWareSkuData.stock"></el-input-number>
          </el-form-item>
          <el-form-item label="锁定库存" prop="stockLocked">
            <el-input-number v-model="addWareSkuData.stockLocked"></el-input-number>
          </el-form-item>
        </el-form>
      </div>
      <template #footer>
      <span class="dialog-footer">
        <el-button @click="addDialog = false">取消</el-button>
        <el-button type="primary" @click="addWareSkuFun">
          确定
        </el-button>
      </span>
      </template>
    </el-dialog>
  </div>
</template>
<script setup>
import { onMounted, reactive, ref, watch} from 'vue'
import {addWareSku, getWareSkuListPage,getWareInfoList} from '@/api/home/warehouse/warehouse'
import {useRoute} from "vue-router";

const route=useRoute()
let addDialog = ref(false)
let addRef = ref()
let wareList = ref([])
let addWareSkuData = reactive({
  skuId: '',
  wareId: '',
  stock: 0,
  skuName: '',
  stockLocked: 0
})
let pageInfo = reactive({
  pageNum: 1,
  pageSize: 8,
  totals: ''
})
let wareSkuListData = ref([])
let wareSkuSearchDto = reactive({
  wareId: '',
  skuId: ''
})

function addWareSkuFun() {
  addWareSku(addWareSkuData).then(() => {
    SearchWareSkuListFun()
  })
  addDialog.value = false
}

function getWareInfoListFun(pageNum, pageSize, wareInfoSearchDto) {
  getWareSkuListPage(pageNum, pageSize, wareInfoSearchDto).then(res => {
    pageInfo.pageNum = res.data.current - 0
    pageInfo.totals = res.data.total - 0
    wareSkuListData.value = res.data.records
  })
}
function getWareInfoListData(){
  getWareInfoList().then(res=>{
    wareList.value=res.data
  })
}

function SearchWareSkuListFun() {
  getWareInfoListFun(pageInfo.pageNum, pageInfo.pageSize, wareSkuSearchDto)
}

onMounted(() => {
  if (route.query.skuId){
    wareSkuSearchDto.skuId=route.query.skuId
  }
  SearchWareSkuListFun()
})

watch([()=>pageInfo.pageNum,()=> pageInfo.pageSize], () => {
  SearchWareSkuListFun()
})

</script>
<style scoped>


</style>
